<template>
  <el-table :data="list" :border="true" :stripe="true">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="角色名称" />
    <el-table-column prop="description" label="描述" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button link type="primary">分配角色</el-button>
        <el-button link type="primary">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <ElConfigProvider :locale="zhCn">
      <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="count" />
    </ElConfigProvider>
  </div>
</template>
<script setup lang='ts'>
import { useTable } from '@/hooks/useTable';
import { queryRoleListApi } from '@/api'
// @ts-ignore -- 这个注释的作用，让ts检查到这一行，别管
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const { list, count, getData, pageNum, pageSize } = useTable(queryRoleListApi, {})

</script>
<style lang="less" scoped></style>